<template>
	<div>
		<van-pull-refresh v-model="refreshing" @refresh="flashBlog" style="height: calc(100vh - 140px);overflow: scroll;">
			<van-list v-model:loading="loadingNewBlog" :finished="noMoreBlog" finished-text="没有更多了" @load="loadNewBlog">
				<van-cell v-for="(blog,key) in blogList" :key="key">
					<BlogWithComment :data="blog" :clickHead="openUserPage"></BlogWithComment>
				</van-cell>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
	import BlogWithComment from '@/components/units/BlogWithComment.vue';
	import {
		showNotify
	} from 'vant';
	import url from '@/assets/url.json';
	
	export default {
		components: {
			BlogWithComment
		},
		props: {
			listType: String,
			openUserPage: Function
		},
		data() {
			return {
				refreshing:false,
				loadingNewBlog: false,
				noMoreBlog: false,
				page: 0,
				limit: 5,
				blogList: []
			}
		},
		methods:{
			flashBlog(){
				this.blogList=[];
				this.page=0;
				this.loadNewBlog();
			},
			loadNewBlog(){
				this.page+=1;
				this.pushNewBlog();
			},
			pushNewBlog(){
				this.$axios({
					url:url.ip+'/api-blog'+'/blog/'+this.listType,
					method:'GET',
					params:{
						page: this.page,
						limit: this.limit,
					},
					headers:{
						token: this.$cookies.get('token'),
					}
				}).then((res)=>{
					if(res.data.code!==0){
						this.noMoreBlog=true;
						showNotify({ type: 'danger', message: res.data.message });
					}else{
						if(res.data.data.length<=0){
							this.noMoreBlog=true;
						}else{
							for(let key in res.data.data){
								this.blogList.push(res.data.data[key]);
							}
						}
					}
					this.loadingNewBlog=false;
					this.refreshing=false;
				}).catch(()=>{
					this.loadingNewBlog=false;
					this.refreshing=false;
					this.noMoreBlog=true;
					showNotify({ type: 'danger', message: "网络错误或未登录" });
				})
			}
			
		},


	}
</script>

<style>

</style>